<template>
	<view>
		<page-header :logo='logo' :classsw='classshow'></page-header>

		<view class="contents">
			<image :src="bar_icon" :mode="mode"></image>
			<view class="floor_three clear_fix">
				<view class="floor_threelist">
					<image :src="frisobabykv"></image>
				</view>
				<view class="floor_threelist" @tap='linkbtn' :data-webview="left_cattle_url">				
					<image :src="left_cattle"></image>
				</view>
				<view class="floor_threelist" @tap='linkbtn' :data-webview="right_cattle_url">
						<image :src="right_cattle"></image>
				</view>
				<view class="floor_threelist" @tap='linkbtn' :data-webview="left_milk_url">
						<image :src="left_milk"></image>
				</view>
			</view>

			<image :src="right_milk" :mode="mode"></image>
			<image :src="icon_more" :mode="mode"></image>
			<image class="J_PopVideo" @tap='videoClick' :src="gold_one2" :mode="mode"></image>
			<ms-video ref='video' :poster='videoshow'></ms-video>
			<image :src="gold_one3" :mode="mode"></image>
			<image :src="gosm" :mode="mode"></image>
			<image :src="mobile1" :mode="mode"></image>
			<image :src="menu_border_bg" :mode="mode"></image>
			<image :src="xiaofenzi" :mode="mode"></image>
			
		</view>
		<footer-text></footer-text>
		<page-footer></page-footer>
		<gototop></gototop>
	</view>
</template>

<script>
	import footerText from '@/components/footer-text.vue'
	import gototop from '@/components/gototop.vue'
	import video from '@/components/ms-video.vue'
	export default {
		data() {
			return {
				mode: 'widthFix',
				logo: 'https://www.frisobaby.com/media/1890/mob角标logo.png',
				classshow:'frisoclass',
				videoshow: 'https://www.frisobaby.com/media/1978/friso_prestige_30s_mand_180731-1.mp4',
				bar_icon: 'https://www.frisobaby.com/media/1935/mo首页轮播kv1.jpg',
				frisobabykv: 'https://www.frisobaby.com/resources/images/mobile/gold_04.png',
				
				left_cattle: 'https://www.frisobaby.com/media/1898/mo2段入口.png',
				left_cattle_url:'https://www.frisobaby.com/mobile/products/friso-royal/royalsection-2/',
				
				right_cattle: 'https://www.frisobaby.com/media/1895/mo3段入口.png',
				right_cattle_url:'https://www.frisobaby.com/mobile/products/friso-royal/royalsection-3/',
				
				left_milk: 'https://www.frisobaby.com/media/1896/mo4段入口.png',
				left_milk_url:'https://www.frisobaby.com/mobile/products/friso-royal/royalsection-4/',
				
				right_milk: 'https://www.frisobaby.com/media/1893/mob-第一滴奶源.jpg',
				icon_more: 'https://www.frisobaby.com/resources/images/mobile/border_gold.jpg',
				gold_one2: 'https://www.frisobaby.com/media/1979/1.jpg',
				gold_one3: 'https://www.frisobaby.com/resources/images/mobile/border_gold.jpg',
				gosm: 'https://www.frisobaby.com/media/1891/mob-all-0718jpg.jpg',
				mobile1: 'https://www.frisobaby.com/resources/images/mobile/border_gold.jpg',
				menu_border_bg: 'https://www.frisobaby.com/media/1940/mob-宝护盖3.jpg',
				xiaofenzi: 'https://www.frisobaby.com/resources/images/mobile/border_gold.jpg'

			}

		},
		onLoad() {

		},
		methods: {
			videoClick:function(){
				this.$refs.video.videoClick()
			},
			linkbtn: function(e) {
				var webview = e.currentTarget.dataset.webview
				if (webview !== '') {
					uni.navigateTo({
						url: '/pages/link/link?url=' + webview
					})
				}
			},
		},
		components: {
			'footer-text': footerText,
			'gototop': gototop,
			'ms-video': video
		},
		onShareAppMessage: function() {
			return {
				title: '皇家美素佳儿',
				desc: '皇家美素佳儿',
				path: 'pages/friso/friso'
			}
		}
	}
</script>

<style>
	
	.contents {
		margin-top: 82upx;
		width: 100%;
		font-size: 0;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.zero {
		font-size: 0;
	}

	.floor_three {
		width: 100%;
		height:670upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.floor_three .floor_threelist {
		width: 50%;
	}
</style>
